<template>
  <div>
    <el-dialog title="新增订单" :visible.sync="showAddOrderDialog" center width="770px">
      <el-form :model="orderData" :rules="rules" ref="orderData">
        <el-form-item label="所属用户" :label-width="formLabelWidth">
          <el-select v-model="orderData.customer_id" filterable placeholder="请选择">
            <el-option
              v-for="item in customerList"
              :key="item.customer_id"
              :label="item.nickname"
              :value="item.customer_id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属活动" :label-width="formLabelWidth">
          <el-select v-model="orderData.activity_id" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in activityList"
              :key="index"
              :label="item.name"
              :value="item.activity_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属店铺" :label-width="formLabelWidth">
          <el-select v-model="orderData.store_id" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item.name"
              :value="item.customer_store_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="使用的优惠券" :label-width="formLabelWidth">
          <el-select v-model="orderData.activity_coupon_id" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in couponList"
              :key="index"
              :label="item.activity_coupon_id"
              :value="item.activity_coupon_id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="用户手机号" :label-width="formLabelWidth">
          <el-input v-model="orderData.customer_telephone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="减免价格" :label-width="formLabelWidth">
          <el-input v-model="orderData.discount_amount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="实际价格" :label-width="formLabelWidth">
          <el-input v-model="orderData.actual_total" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单总价格" :label-width="formLabelWidth">
          <el-input v-model="orderData.total" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="支付状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.pay_status" :label="'0'">未支付</el-radio>
          <el-radio v-model="orderData.pay_status" :label="'1'">已支付</el-radio>
        </el-form-item>

        <el-form-item label="订单退款状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.refund_status" :label="'0'">未退款</el-radio>
          <el-radio v-model="orderData.refund_status" :label="'1'">已退款</el-radio>
        </el-form-item>


        <!--  订单状态，0失败，1进行中，2已完成  -->
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-radio v-model="orderData.status" :label="0">失败</el-radio>
          <el-radio v-model="orderData.status" :label="1">进行中</el-radio>
          <el-radio v-model="orderData.status" :label="2">已完成</el-radio>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit">取 消</el-button>
        <el-button type="primary" @click="submitCustomer('orderData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /**
   customer_id	                  用户id
   activity_id	                  活动id
   activity_title                 活动名称(根据活动id生成)
   customer_telephone             用户手机号
   total                          订单总价格
   pay_status                     支付状态： 0未支付，1已支付
   status                          订单是否有效：1有效，0无效
   date_added	datetime	          非必填	0	-	生成日期
   */

  /**
   customer_id                    用户id
   customer_telephone             用户手机号
   activity_coupon_id             优惠券所使用的id
   total                          订单总价格
   discount_amount                减免价格
   actual_total                   实际价格
   pay_status                     0未支付，1已支付，支付状态
   refund_status                  订单退款状态 0(未退款),1(已退款)
   status                         1有效，0无效；优惠活动默认有效，团购活动团购成功才有效。
   date_added                     生成日期
   activity_id                    活动id
   activity_title	            	  活动名称
   order_activity_id              活动订单id
   store_id
   */
  import store from '@/store'
  import {add} from '@/api/thk/order'
  import {list as getActivityList} from '@/api/thk/activity'



  export default {
    name: 'addOrder',
    data() {
      return {
        showAddOrderDialog: false,
        formLabelWidth: '130px',
        orderData: {
          customer_id: '',
          activity_id: '',
          activity_title: '',
          customer_telephone: '',
          total: '',
          pay_status: '',
          status: '',
          date_added: '',
          activity_coupon_id: '',
          discount_amount: '',
          actual_total: '',
          refund_status: '',
          store_id: ''
        },

        customerList: [],
        activityList: [],
        couponList: [],
        storeList: [],

        rules: {
          // 昵称必填
          name:[
            { required: true, message: '必填项', trigger: 'blur' },
          ],
          telephone:[
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' }
          ]
        },
      }
    },


    methods: {
      // 判断是否点击了提交
      submitCustomer(orderData){
        this.$refs[orderData].validate((valid) => {
          if (valid) {
            this.orderData.activity_title = this.getActivityName(this.orderData.activity_id)
            // this.orderData.date_added = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            console.log('-----> add order')
            console.log(this.orderData)
            add(store.getters.token,this.orderData).then(result => {
              // 增加成功
              this.showAddOrderDialog = !this.showAddOrderDialog
              this.$message.success("增加成功!")
              this.$parent.getOrderList()
            }).catch(error => {
              this.$message("增加失败!")
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      cancelSubmit(customerList, couponList, storeList){
        this.getActivityList()
        this.customerList = customerList
        this.couponList = couponList
        this.storeList = storeList
        this.showAddOrderDialog = !this.showAddOrderDialog

      },

      getActivityList(){
        getActivityList(store.getters.token).then(res => {
          this.activityList = res.data.list.data
        }).catch(err => {
          console.log(err)
        })

      },

      // 根据活动id返回活动名称
      getActivityName(activity_id){
        let activitys = this.activityList.filter(activity => {
          return activity.activity_id == activity_id
        })

        if(activitys[0]){
          return activitys[0].name
        }
        return activity_id
      },



    }
  }
</script>
